<template>
  <el-table :data="data" border>
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column
      prop="supplier.name"
      label="制作公司"
      width="240"
    ></el-table-column>
    <el-table-column
      prop="content"
      label="制作内容"
      width="200"
    ></el-table-column>
    <el-table-column
      v-if="$can('read', 'ManufacturWorkParamFee')"
      prop="fee"
      label="制作费用"
      width="120"
    >
      <template v-slot="{ row }">
        <span>{{ formatAmount(row.fee) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="estimate_start_date"
      label="预期开始时间"
      width="120"
    >
      <template v-slot="{ row }">
        <span>{{ formatDate(row.estimate_start_date) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="estimate_end_date" label="预期交付时间" width="120">
      <template v-slot="{ row }">
        <span>{{ formatDate(row.estimate_end_date) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="100">
      <template v-slot="{ row }">
        <DesignStatus :data="row" />
      </template>
    </el-table-column>
    <el-table-column
      prop="estimate_start_date"
      label="实际开始时间"
      width="180"
    >
      <template v-slot="{ row }">
        <span>{{ formatDate(row.start_date, 'time') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="完成时间" width="180">
      <template v-slot="{ row }">
        <span>{{ formatDate(row.complete_date, 'time') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="制作用时" width="100">
      <template v-slot="{ row }">
        <DesignUseTime :data="row" />
      </template>
    </el-table-column>
    <!-- <el-table-column prop="remark" label="备注"></el-table-column>  -->
  </el-table>
</template>

<script lang="ts" setup name="InstallationList">
import { formatDate, formatAmount } from '/@/utils';
import DesignUseTime from './design-use-time.vue';
import DesignStatus from './design-status.vue';

defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
</script>
